<template>
	<view>
		<!-- 1 轮播图 2 图片 3 富文本 4 表单 -->
		<view style="padding: 30rpx;">
			<view v-for="(el,i) in list" :key="i" style="margin-bottom: 40rpx;">
				<view v-if="el.type==1">
					<swiper class="swiper"  circular  
						:autoplay="true" :interval="3000" 
						:duration="1000">
						<swiper-item  class="swiper-item" 
						v-for="(item,ind) in JSON.parse(el.content)" :key="i">
							<image class="img"
								mode="widthFix"
								:src="item"></image>
						</swiper-item>
					</swiper>
				</view>
				<view v-if="el.type==2" style="margin-bottom: 50rpx;">
					<image mode="widthFix" :src="el.content"></image>
				</view>
				<view v-if="el.type==3" style="margin-bottom: 60rpx;">
					<u-parse :content="el.content"></u-parse>
				</view>
				<view 
					class="subInfo"
					v-if="el.type==4" >
					<view v-for="(item,ind) in el.content"
						:key="ind"
						style="margin-bottom: 20rpx;"
						>
						<view class="title" style="margin-bottom: 30rpx;">
							<text 
								v-if="item.isMust==1"
								style="position: relative;top: -6rpx;color: red;margin-right: 5rpx;">*</text> 
							{{item.title}}
						</view>
						<view class="inpBox">
							<input 
								class="inp"
								type="text" v-model="item.value">
						</view>
					</view>
				</view>
				<!-- // 目标经纬度，标题
				let lat = this.detail.latitude;
				let lng = this.detail.longitude;
				let title = this.detail.name;
				let key = 'QV3BZ-******-X4BPU'; // 腾讯地图key
				let url = ''
				if(index == 0){
					// 腾讯地址
					url = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${lat},${lng};title:${title};addr:${title}&referer=${key}`;
				}else if(index == 1){
					// 百度地图
					let baiduUrl = `marker?location=${lat},${lng}&title=${title}&content=${title}`;
					url = `https://api.map.baidu.com/${baiduUrl}&output=html&src=webapp.baidu.openAPIdemo`;
				}else if(index == 2){
					// 高德地图
					url = `https://uri.amap.com/marker?position=${lng},${lat}&name=${title}&src=mypage&coordinate=gaode&callnative=1`;
				}
				location.href = url; -->
			
				<view v-if="el.type==5">
					<map style="width: 100%; height: 600rpx;"
						scale="12"
						:markers="[
							{
								latitude: JSON.parse(el.content)[0].lat,
								longitude: JSON.parse(el.content)[0].lng,
								iconPath: '/static/img/map.png', 
								width: 20,
								height: 25,
							}
						]"
						:latitude="JSON.parse(el.content)[0].lat"
						:longitude="JSON.parse(el.content)[0].lng"
						>
					</map>
				</view>
			</view>
			<view >
				<u-button type="primary" 
					v-if="isShowSub"
					@click="submit" text="提交"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { envType } from '@/common/js/env.js'
	export default {
		data(){
			return {
				list:[],
				cid:'',
				isShowSub:false
			}
		},
		onLoad(opt){
			if(envType=='dev'){
				this.cid = 1
			}else{
				this.cid = opt.cid
			}
		},
		onShow(){
			this.lodeList()
		},
		methods:{
			submit(){
				console.log(11111)
				console.log(this.list,1111)
				let subValue = this.list.filter((el)=>{
					return el.type == 4
				})
				if(subValue.length){
					let content = subValue[0].content
					
					for(let item of content){
						if(item.isMust == 1 && !item.value){
							return this.$utils.Toast(`${item.title}不能为空`)
						}
					}
					
					let params = {
						table_name:"sub_value",
						dd:{
							content:JSON.stringify(content),
							cid:this.cid
						}
					}
					this.$api.base.subValue(params).then(res=>{
						this.$utils.Toast('提交成功')
						setTimeout(()=>{
							this.$router.go(0)
						},1000)
						
					})
					
				}
				
				
			},
			lodeList(){
				if(!this.cid) return this.$utils.Toast('参数错误')
				this.$api.base.getCodeInfo({cid:this.cid}).then(res=>{
					this.list = res.data
					for(let item of this.list){
						if(item.type==4){
							this.isShowSub = true
							item.content = JSON.parse(item.content)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.subInfo{
		.title{
			margin-bottom: 10rpx;
			font-size: 25rpx;
			font-family: SimSun;
			margin-bottom: 20rpx;
		}
		.inpBox{
			border: 1rpx solid #d7d7d7;
			border-radius: 10rpx;
			height: 70rpx;
			padding: 10rpx 20rpx;
		}
	}
</style>